<link rel="stylesheet" href="/Static/mobile/vant/index.css">
<link rel="stylesheet" href="//at.alicdn.com/t/font_813618_nz1v6c995rc.css">
<script src="/Static/mobile/vant/vue.min.js"></script>
<script src="/Static/mobile/vant/vant.min.js"></script>
<style>
    body{
        background: #ededed;
    }
    .head{
        background: #fff;
        padding:10px;
    }
    .head-item{
        display: inline-block;
        border-radius: 10px;
        background: #ededed;
        padding: 5px 10px;
        margin:5px;
    }
    .list {
        margin: 10px 0;
        padding-bottom:40px;
    }
    .list h3 {
        color:#e6207a;
    }
    .list-item {
        padding:10px 10px 50px 10px;
        margin:10px 0;
        background: #fff;
        position: relative;
    }
    .imglist img {
        width:32.5%;
        box-sizing: border-box;
        border:1px solid #fff;
        vertical-align: inherit;
    }
    .actions {
        position: absolute;
    }
    .van-tabbar-item--active{		    
        color:#666 !important;		
    }
    iframe{
        width:100%;
    }
</style>
<div style="display: none;" id="app">
     <div class="head">
        <div :class="activeType===index?'active-type':''" @click="activeType=index" v-for="(item,index) in typelist" class="head-item">
            <i v-if="!(activeType===index)" style="color:#e6207a;" class="iconfont icon-hot"></i> 
            <i v-if="(activeType===index)" style="color:#fff;" class="iconfont icon-hot"></i> 
            #{{item.type_name}}#
        </div>
    </div>
    <div class="list">
        <van-list
            v-model="loading"
            :finished="finished"
            @load="onLoad"
        >
            <template
              v-for="(item,index) in showShareList"
              :key="item"
            >
            <div class="list-item">
                <h3 style="font-weight:bold;" @click="onChange(item)">#{{item.share_title}}#</h3>
                <p v-html="item.share_text" style="padding:5px 0;color:#6F6F6F;"></p>
                
                <p v-html="item.share_data" style="padding:5px 0;color:#6F6F6F;">
                </p>
                <div  class="imglist">
                    <img v-if="item.share_thumb.length>1" v-for="img in item.share_thumb" @click="handleFile(item,'preview')" :src="img+'!/min/200/clip/200x200a0a0/gravity/center'"/>
                    <img v-if="item.share_thumb.length==1" v-for="img in item.share_thumb" @click="handleFile(item,'preview')" :src="img"/>
                </div>
                <div style="padding:5px 0;color:#6F6F6F;">发布时间: {{item.create_time}}</div>
                <van-tabbar v-model="active" style="position: absolute;" @change="onChange(item)">
                    <van-tabbar-item @click="handleFile(item,'like')" >
                        <span>收藏</span>
                        <img slot="icon" src="/Static/mobile/index/icon/shoucang.png"/>
                        <!-- <i slot="icon" style="font-size: 20px;" class="icon iconfont icon-like"></i> -->
                    </van-tabbar-item>
                    <van-tabbar-item @click="handleFile(item,'download')">
                        <span >图片下载</span>
                        <img slot="icon" src="/Static/mobile/index/icon/down.png"/>
                        <!-- <i slot="icon" style="font-size: 20px;" class="icon iconfont icon-bookdownload"></i> -->
                    </van-tabbar-item>
                    <van-tabbar-item @click="handleFile(item,'copy')">
                        <span >文字复制</span>
                        <img slot="icon" src="/Static/mobile/index/icon/copy.png"/>
                        <!-- <i slot="icon" style="font-size: 20px;" class="icon iconfont icon-copy"></i> -->
                    </van-tabbar-item>
                    <van-tabbar-item @click="handleFile(item,'share')">
                        <span >一键分享</span>
                        <img slot="icon" src="/Static/mobile/index/icon/weixin.png"/>
                        <!-- <i  slot="icon" style="font-size: 20px;" class="icon iconfont icon-wechat1"></i> -->
                    </van-tabbar-item>
                </van-tabbar>
            </div>
            </template>
        </van-list>
        
    </div> 
</div>

<script>
    function vueInit () {
        var app = new Vue({
            el: '#app',
            data: {
                activeType:'',
                active:-1,
                list: [],
                loading: false,
                finished: false,
                typelist:[],
                sharelist:[],
                page:1
            },
            watch: {
                activeType: function (val,oldval) {
                    this.page = 1;
                    this.sharelist = [];
                    this.loading = false;
                    this.finished = false;
                    this.onLoad();
                }
            },
            created:function () {
                var self = this;
                $.get('/Api/Share/getType').then(function(res){
                    if(res.code=200) {
                        res.data.forEach(function(item){
                            self.typelist.push(item);
                        });
                    }
                });
                // this.onLoad();
                /* $.get('/Api/Share/getShareInfoByType').then(function(res){
                    if(res.code=200) {
                        res.data.forEach(function(item){
                            self.sharelist.push(item);
                        });
                    }
                }) */
            },
            mounted: function () {
                $('#app').show();
            },
            computed: {
                showShareList: function () {
                    return this.sharelist;
                    /* if(this.activeType==='') {
                        return this.sharelist;
                    }else{
                        var list = [];
                        var type = this.typelist[this.activeType];
                        this.sharelist.forEach(function(item){
                            if(item.share_type==type.type_id) {
                                list.push(item);
                            }
                        })
                        return list;
                    } */
                }
            },
            methods: {
                onLoad() {
                    window.v = this;
                    this.loading = true;
                    var self = this;
                    var url = '/Api/Share/getShareInfoByType?page='+this.page;
                    var activeType = this.activeType;
                    var data = {
                        page: this.page,
                    }
                    if(activeType!=='') {
                        var type = this.typelist[this.activeType];
                        //var url = url+'&type_ids='+type.type_id;
                        data['type_ids'] = type.type_id;
                    }
                    $.ajax({
                        url: url,
                        type:'post',
                        data: data
                    }).then(function(res) {
                        if(res.code=200) {
                            if(self.page>=res.page_count) {
                                self.finished = true;
                            }
                            if(res.data.length==0) {
                                self.finished = true;
                            }
                            self.loading = false;
                            self.page++;
                            res.data.forEach(function(item){
                                self.sharelist.push(item);
                            });
                        }
                    })
                    /* $.get(url).then(function(res){
                        
                    }) */
                },
                onChange: function (item) {
                    /* if(this.active==0) {
                        this.handleFile(item,'like');
                    }else if(this.active==1) {
                        this.handleFile(item,'download');
                    }else if(this.active==2) {
                    }else if(this.active==3) {
                        this.handleFile(item,'share');
                    } */
                },
                handleFile:function (msg,type) {
                    window.vv = msg;
                    var text = msg.share_copy;
                   /*  console.log(text);
                    var text = msg.share_text.replace(/\n/g,   " <br>");
                    console.log(text);
                    text = text.replace(/ <br>/g,   " ");
                    console.log(text); */
                    var tasks = [];
                    plus.nativeUI.showWaiting();
                    if(type=='copy') {
                        if(plus.os.name=='Android') {
                            var Context = plus.android.importClass("android.content.Context");
                            var main = plus.android.runtimeMainActivity();
                            var clip = main.getSystemService(Context.CLIPBOARD_SERVICE);
                            plus.android.invoke(clip,"setText",text);
                        }else{
                            // var UIPasteboard  = plus.ios.importClass("UIPasteboard");
                            // var generalPasteboard = UIPasteboard.generalPasteboard();
                            // generalPasteboard.plusCallMethod({setValue:text, forPasteboardType:"public.utf8-plain-text"});
                            // generalPasteboard.plusCallMethod({valueForPasteboardType:"public.utf8-plain-text"});
                        }
                        
                        plus.nativeUI.closeWaiting()
                        return false;
                    }
                    if(type=='preview') {
                        plus.nativeUI.closeWaiting()
                        plus.nativeUI.previewImage(msg.share_thumb);
                        return false;
                    }
                    var imgurls = msg.share_thumb;
                    for(var idx=0;idx<imgurls.length;idx++) {
                        plus.downloader.createDownload(imgurls[idx],'',function(index){
                            return function (d,status) {
                                if(status == 200){ 
                                    var filename = d.filename;
                                    tasks.push({
                                        index:index,
                                        status:status,
                                        filename:filename
                                    });
                                    if(tasks.length==imgurls.length) {
                                        plus.nativeUI.closeWaiting();
                                        //全部下载完成
                                        var files = [];
                                        tasks.forEach(function(item){
                                            files.push(item.filename);
                                        });
                                        if(type=='download') {
                                            var len = 0;
                                            files.forEach(function(file) {
                                                plus.gallery.save(file,function() {
                                                    len++;
                                                    if(len==files.length) {
                                                        alert('保存成功');
                                                    }
                                                    plusobj.delFile(file);
                                                }, function() {
                                                });
                                            })
                                        }else if(type=='share') {
                                            plus.share.sendWithSystem({
                                                pictures:files
                                            }, function(){
                                                files.forEach(function(file) {
                                                    //plusobj.delFile(file);
                                                })
                                            }, function(){});
                                        }else if(type=='like') {
                                            plusobj.shareWeixinPic([files[0]],'WXSceneFavorite');
                                        }
                                       /*   */
                                    }
                                } else {
                                }  
                            }
                        }(idx)).start(); 
                    }
                },
                copy: function () {

                },
            }
        });
    }
    document.addEventListener("plusready",function(){
        vueInit();
    },false);
    
    
</script>
<style>
    .van-cell__title {
        max-width: 90px;
    }

    .van-cell__value {
        text-align: left;
    }
    .active-type {
        color:#fff;
        background: rgb(230, 32, 122);
    }
</style>
<include file="Common:nav"/>